<template>
	<view class="detail">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="detailSwiper">
			<swiper-item class="swiper-item">
				<image :src="detailData.photo" mode=""></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image :src="detailData.photo" mode=""></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image :src="detailData.photo" mode=""></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image :src="detailData.photo" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="detailMiddle">
			<view class="middleLeft">
				<view class="MleftText">
					<text>￥{{detailData.sale_price}}</text>潮礼抢先囤
				</view>
				<view class="MleftPrice">价格
					<text style="text-decoration:line-through">￥{{detailData.market_price}}</text>
				</view>
			</view>
			<view class="middleRight">
				<view class="MrightText">距离结束仅剩2天</view>
				<view class="MrightTime">
					<view class="Time">15</view>:<view class="Time">06</view>:<view class="Time">35</view>
				</view>
			</view>
		</view>
		<view class="detailBottomdesc">
			<view class="Bottomdesc1">{{detailData.subject}}</view>
			<view class="Bottomdesc2">{{detailData.presubject}}</view>
		</view>
		<view class="blankBox"></view>
		<view class="detailBottom">
			<view class="Ensure">
				<image src="../../static/images/qualityassurance.png"></image>
				<view class="EnsureText">正品保证</view>
			</view>
			<view class="Ensure">
				<image src="../../static/images/freeshipping.png"></image>
				<view class="EnsureText">99元包邮</view>
			</view>
			<view class="Ensure">
				<image src="../../static/images/thirtydays.png"></image>
				<view class="EnsureText">30天退货</view>
			</view>
		</view>
		<view class="detailFollow">
			<view class="Follow1">
				<image src="../../static/images/wujiaoxing.png" mode=""></image>
				<view class="Follow1Text">收藏</view>
			</view>
			<view class="Follow2">
				<image src="../../static/images/tabBar/tab-cart.png" mode=""></image>
				<view class="Follow2Text">购物车</view>
			</view>
			<view class="Follow3" @click="toCart">
				<view class="Follow3Text">加入购物车</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				detailData:{}
			};
		},
		mounted(){
			this.detailData=wx.getStorageSync('shopdetail_key')
			console.log('this.detailData',this.detailData)
		},
		methods:{
			toCart(){
				//点击添加购物车
				//首先要判断购物车列表当中是否存在这个商品相关的购物车数据
				console.log(this);
				let obj=this.cartList.find(item=>item.gid===this.detailData.gid)
				if(obj){
					//如果有，直接修改数量
					obj.count++;
					obj.isChecked=true
				}else{
					//如果没有，需要把当前这个详情页商品数据变为购物车数据，添加到购物车列表
					obj=this.detailData
					this.$set(obj,'count',1);
					this.$set(obj,'isChecked',true);
					this.cartList.push(obj)
				}
				wx.reLaunch({
					url:"/pages/cart/cart"
				})
			}
		},
		computed:{
			...mapState({
				cartList:state=>state.cart.cartData
			})
		}
	}
</script>

<style lang="stylus">
	.detail 
		width 100% 
		height 100% 
		.detailSwiper
			width 100%
			height 700rpx
			// background-color #007AFF
			.swiper-item
				image
					width 700rpx
					height 700rpx
					margin-left 25rpx
		.detailMiddle
			width 100%
			height 134rpx
			// background-color #1BFF0F
			display flex
			.middleLeft
				width 65%
				height 134rpx
				background-color #282729
				.MleftText
					color #ffffff
					padding-top 20rpx
					margin-left 20rpx
					text
						font-size 32rpx
						font-weight 700
						color #e6b686
						margin-right 10rpx
				.MleftPrice
					color #ffffff
					margin 20rpx 0 0 20rpx
			.middleRight
				width 35%
				height 134rpx
				background-color #e7b171
				.MrightText
					width 200rpx
					height 40rpx
					// background-color #2A34C5
					font-size 24rpx
					margin-top 30rpx
					margin-left 30rpx
				.MrightTime
					width 200rpx
					height 60rpx
					// background-color #1BFF0F
					margin-left 30rpx
					margin-top 10rpx
					font-weight 700
					color rgb(207 127 56)
					display flex
					.Time
						width 50rpx
						height 50rpx
						background-color #ffffff
						margin-left 5rpx
						border-radius 15rpx
		.detailBottomdesc
			width 100%
			height 82rpx
			// background-color #00BF00
			.Bottomdesc1
				width 700rpx
				height 40rpx
				font-size 25rpx
				margin 10rpx
				// background-color #007AFF
			.Bottomdesc2
				width 700rpx
				height 40rpx
				font-size 22rpx
				margin 10rpx
				color #FF0000
				// background-color #007AFF
		.blankBox
			width 100%
			height 40rpx
			background-color #f3f4f5
		.detailBottom
			width 100%
			height 82rpx
			// background-color #007AFF
			display flex
			.Ensure
				width 33.333333%
				height 100%
				// background-color #00A200
				// border-right 1rpx solid #FF0000
				display flex
				// flex-direction column
				align-items center
				justify-content center
				image
					width 40rpx
					height 40rpx
		.detailFollow
			width 100%
			height 158rpx
			// background-color #007AFF
			display flex
			.Follow1
				width 20%
				height 100rpx
				// background-color #1BFF0F
				margin-top 40rpx
				margin-left 20rpx
				display flex
				flex-direction column
				align-items center
				image
					width 40rpx
					height 40rpx
				.Follow1Text
					width 100%
					height 40rpx
					text-align center
					color #b3b3b3
			.Follow2
				width 20%
				height 100rpx
				// background-color #1BFF0F
				margin-top 40rpx
				margin-left 20rpx
				display flex
				flex-direction column
				align-items center
				image
					width 40rpx
					height 40rpx
				.Follow2Text
					width 100%
					height 40rpx
					text-align center
					color #b3b3b3
			.Follow3
				width 50%
				height 100rpx
				background-color #FF0000
				margin 40rpx 20rpx
				.Follow3Text
					text-align center
					line-height 100rpx
					color #FFFFFF
</style>
